﻿<template>
    <el-col :sm="24" :md="pzoption.mdwidth">
        <i class="iconfont icon-shezhi pull-right widgetset hidden-print" @click.stop="dialogInputVisible = true"></i>
        <i class="iconfont icon-shanchu pull-right widgetdel hidden-print" @click.stop="delWid(pzoption.wigdetcode)"></i>
        <el-form-item :label="pzoption.title" :prop="'wigetitems.' + index + '.value'" :rules="childpro.rules">
          
            <el-cascader v-model="pzoption.value"
                         :options="wigdata"
                         :disabled="childpro.disabled"
                         :props="childpro.props"
                         style="width:100%"  @change="selchange"  filterable clearable collapse-tags ref="refcascader">
            </el-cascader>


        </el-form-item>
        <el-dialog title="组件属性" :visible.sync="dialogInputVisible" width="40%">
            <el-form-item label="下拉框更改时执行代码">
                <el-input v-model="childpro.jscode" :autosize="{ minRows: 6, maxRows: 9}" autocomplete="off" type="textarea"></el-input>
            </el-form-item>

        </el-dialog>
    </el-col>

</template>
<script>
    // 专业
    module.exports = {
        props: ['pzoption', 'index'],
        data: function () {
            return {
                dialogInputVisible: false,
                wigdata: [],
                childpro: {
                    rules: {
                        required: false, message: '不能为空', type: "string"
                    },
                    name: "专业组件",
                    jscode: "",
                    props: {
                        multiple: false,
                        emitPath: false,
                        expandTrigger: "hover",
                        value: "value",
                        label: "label",
                        pvalue: "pval"
                    }
                }
            }
        },
        methods: {
            delWid: function (wigdetcode) {
                // 子组件中触发父组件方法ee并传值cc12345
                this.$root.nowwidget = {};
                _.remove(this.$root.FormData.wigetitems, function (obj) {
                    return obj.wigdetcode == wigdetcode;
                });
            },
            jsonToTree: function (jsonData, id, pid, children) {
                for (var i = 0; i < jsonData.length; i++) {
                    jsonData[i][id] = jsonData[i][id] + "";
                    jsonData[i][pid] = jsonData[i][pid] + "";

                }//数组里不能为数字
                let result = [],
                    temp = {};
                for (let i = 0; i < jsonData.length; i++) {
                    temp[jsonData[i][id]] = jsonData[i]; // 以id作为索引存储元素，可以无需遍历直接定位元素
                }
                for (let j = 0; j < jsonData.length; j++) {
                    let currentElement = jsonData[j];
                    let tempCurrentElementParent = temp[currentElement[pid]]; // 临时变量里面的当前元素的父元素
                    if (tempCurrentElementParent) {
                        // 如果存在父元素
                        if (!tempCurrentElementParent[children]) {
                            // 如果父元素没有chindren键
                            tempCurrentElementParent[children] = []; // 设上父元素的children键
                        }
                        tempCurrentElementParent[children].push(currentElement); // 给父元素加上当前元素作为子元素
                    } else {
                        // 不存在父元素，意味着当前元素是一级元素
                        result.push(currentElement);
                    }
                }
                return result;
            },
            selchange: function () {
                try {
                    var data = JSON.parse(JSON.stringify(this.pzoption));
                    let jscode = this.childpro.jscode;
                    let func = new Function('data', jscode);
                    func(data)
                } catch (e) {
                    app.$notify({
                        title: '成功',
                        message: '解析JS代码有误',
                        type: 'success'
                    });
                }

            },
            initwig: function () {
                var chi = this;
                //初始化数据

                var temparr = JSON.parse(localStorage.getItem("zydata"));
                _.forEach(temparr, function (obj) {
                    obj.label = _.trim(obj.label) + '[' + _.trim(obj.value) + ']';
                })
                var opidata = chi.jsonToTree(temparr, "value", "pval", "children");
                chi.wigdata = opidata;
                //初始化数据

                //新增和设计页面处理默认值
                if (chi.$root.pagemodel == "0" || chi.$root.pagemodel == "1") {

                }

            }
        },
        mounted: function () {
            var chi = this;
            chi.$nextTick(function () {
                //
                if (chi.$root.addchildwig) {
                    chi.$root.addchildwig();
                }
                if (chi.pzoption.childpro.name) {
                    //如果不是设计表单页面,检测新增属性
                    _.forIn(chi.childpro, function (value, key) {
                        if (!_.has(chi.pzoption.childpro, key)) {
                            chi.pzoption.childpro[key] = value;
                        }

                    });
                    chi.childpro = chi.pzoption.childpro;
                    //非第一次加载加载自身属性
                } else {
                    chi.pzoption.childpro = chi.childpro;
                    //第一次加载时把默认属性给组件
                }
                //初始化方法
                chi.initwig();
                //初始化方法
            })

        },
        watch: {
            'pzoption.value': { //深度监听，可监听到对象、数组的变化
                handler(newV, oldV) {
                    if (newV) {
                        var chi = this;
                        var tempdata = JSON.parse(localStorage.getItem("zydata"));
                        //var zyitem = _.find(tempdata, function (obj) {
                        //    return obj.zydm == newV;
                        //});
                        chi.pzoption.valuetext = "";
                    }
                },
                deep: true
            },
        }
    };
</script>